<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/3.0.0/fetch.min.js" integrity="sha256-E1M+0f/hvoNVoV8K5RSn1gwe4EFwlvORnOrFzghX0wM=" crossorigin="anonymous"></script>
<script>
  function updateStatus() {
    fetch("/api/<%= URI.encode_www_form(@site.domain) %>/status")
    .then(function(res) { return res.json() })
      .then(function(status) {
        if (status === "READY") {
          window.location.reload()
        }
      })
  }

  setInterval(updateStatus, 1500)
</script>

<div class="w-full max-w-sm mx-auto mt-8">
  <div class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 mt-16 relative text-center">
    <h2 class="text-xl font-bold">Waiting for first pageview</h2>
    <h2 class="text-xl font-bold">on <%= @site.domain %></h2>
    <div class="my-44">
      <div class="block pulsating-circle"></div>
      <p class="text-gray-600 text-sm absolute left-0 bottom-0 mb-6 w-full text-center leading-normal">
        Need to see the snippet again? <%= link("Click here", to: "/#{URI.encode_www_form(@site.domain)}/snippet")%><br />
        Not working? Contact <a href="mailto:support@plausible.io">support@plausible.io</a> to get set up
      </p>
    </div>
  </div>
</div>
